<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2108666_ay6taiolnk5.css">

    <title>Document</title>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="topbar">
            <div class="w1100">
                <ul class="left fl common">
                    <li>
                        <a href=""><span>首页</span></a>
                    </li>
                    <li>
                        <a href=""><span>站长的书</span></a>
                        <div class="tr-hide">
                            <ul class="sub-nav">
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yezi"></i>
                                        <span>
                                            HTML+CSS基础（<span class="red">已改版</span>）
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yezi"></i>
                                        <span>
                                            HTML+CSS进阶（<span class="red">已改版</span>）
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yezi"></i>
                                        <span>
                                            JavaScript基础（<span class="red">已改版</span>）
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yezi"></i>
                                        <span>
                                            HTML5 Canvas（<span class="red">已改版</span>）
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yezi"></i>
                                        <span>
                                            高校教材（<span class="red">已改版</span>）
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yezi"></i>
                                        <span>
                                            HTML5+CSS3（<span class="red">新书</span>）
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yezi"></i>
                                        <span>
                                            jQuery快速上手（<span class="red">新书</span>）
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yezi"></i>
                                        <span>
                                            从0到1系列（<span class="red">套装</span>）
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href=""><span>前端入门</span></a>
                        <div class="tr-hide">
                            <ul class="sub-nav">
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yezi"></i>
                                        <span>HTML入门</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yezi"></i>
                                        <span>CSS入门</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yezi"></i>
                                        <span>JavaScript入门</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yezi"></i>
                                        <span>jQuery入门</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yezi"></i>
                                        <span>Sass教程</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href=""><span>前端进阶</span></a>
                        <div class="tr-hide">
                            <ul class="sub-nav">
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yumaobi"></i>
                                        <span>HTML和CSS进阶</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yumaobi"></i>
                                        <span>CSS3教程</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yumaobi"></i>
                                        <span>HTML5 Canvas</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yumaobi"></i>
                                        <span>JSON教程</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-yumaobi"></i>
                                        <span>正则表达式</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href=""><span>网站设计</span></a>
                        <div class="tr-hide">
                            <ul class="sub-nav">
                                <li>
                                    <a href="">
                                        <i class="iconfont icon-hua"></i>
                                        <span>网页配色</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href=""><span>在线工具</span></a>
                    </li>
                    <li>
                        <a href=""><span>我要出书</span></a>
                    </li>
                </ul>
                <ul class="right fr common">
                    <li><a href=""><span>注册</span></a></li>
                    <li><a href=""><span>登录</span></a></li>
                </ul>
            </div>
        </div>
        <div class="header-container">
            <div class="w1100 clearfix">
                <h1 class="fl"><a href="">绿叶学习网<img src="img/logo.png" alt=""></a></h1>
                <div class="search-box fr">
                    <form action="">
                        <div class="search-type">
                            <div class="click">
                                <span>综合</span>
                                <i class="iconfont icon-xiala1"></i>
                            </div>
                            <ul class="list">
                                <li>文章</li>
                                <li>用户</li>
                                <li>评论</li>
                            </ul>
                        </div>
                        <input class="search-text" type="text" placeholder="喵喵喵？？？">
                        <button class="search-button" type="submit">
                            <i class="iconfont icon-fangdajing"></i>
                        </button>
                    </form>
                    <div class="search-other">
                        <div class="other-l"></div>
                        <div class="other-r"></div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- 轮播图 -->
    <div class="banner" id="banner1">
        <div class="banner-view"></div>
        <div class="banner-btn"></div>
        <div class="banner-number"></div>
        <div class="banner-progres"></div>
    </div>
    <!-- 主体 -->
    <div class="w1100 main">
        <!-- 工具手册和最新动态 -->
        <div class="home-box">
            <div class="home-sider-l">
                <h2 class="common-title">工具手册</h2>
                <ul class="conmon-list manual-list">
                    <li>
                        <i class="iconfont icon-yezi"></i>
                        <a href="">
                            <span data-hover="HTML5参考手册">HTML5参考手册</span>
                        </a>
                    </li>
                    <li>
                        <i class="iconfont icon-yezi"></i>
                        <a href="">
                            <span data-hover="CSS3参考手册">CSS3参考手册</span>
                        </a>
                    </li>
                    <li>
                        <i class="iconfont icon-yezi"></i>
                        <a href="">
                            <span data-hover="JavaScript参考手册">JavaScript参考手册</span>
                        </a>
                    </li>
                    <li>
                        <i class="iconfont icon-yezi"></i>
                        <a href="">
                            <span data-hover="jQuery参考手册">jQuery参考手册</span>
                        </a>
                    </li>
                    <li>
                        <i class="iconfont icon-yezi"></i>
                        <a href="">
                            <span data-hover="Bootstrap参考手册">Bootstrap参考手册</span>
                        </a>
                    </li>
                    <li>
                        <i class="iconfont icon-yezi"></i>
                        <a href="">
                            <span data-hover="HBuilder">HBuilder</span>
                        </a>
                    </li>
                    <li>
                        <i class="iconfont icon-yezi"></i>
                        <a href="">
                            <span data-hover="vscode">vscode</span>
                        </a>
                    </li>
                    <li>
                        <i class="iconfont icon-yezi"></i>
                        <a href="">
                            <span data-hover="Sublime Text 3.0">Sublime Text 3.0</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 3d和旋转菜单 -->
            <div class="home-center">
                <div class="home-menu-rotate3d">
                    <div class="l">
                        <a href="" class="big-box">
                            <div class="big-hide">
                                <h3>站长新书</h3>
                                <p>HTML和CSS进阶</p>
                            </div>
                        </a>
                        <a href="" class="small-box">
                            <span class="top">JSON</span>
                            <span class="front"></span>
                        </a>
                        <a href="" class="small-box">
                            <span class="top">正则</span>
                            <span class="front"></span>
                        </a>
                    </div>
                    <div class="c">
                        <a href="" class="small-box">
                            <span class="top">HTML</span>
                            <span class="front"></span>
                        </a>
                        <a href="" class="small-box">
                            <span class="top">HTML5</span>
                            <span class="front"></span>
                        </a>
                        <a href="" class="small-box">
                            <span class="top">CSS</span>
                            <span class="front"></span>
                        </a>
                        <a href="" class="small-box">
                            <span class="top">CSS3</span>
                            <span class="front"></span>
                        </a>
                        <a href="" class="middle-box">
                            <span class="top">绿叶2.0正式上线</span>
                            <span class="front"></span>
                        </a>
                    </div>
                    <div class="r">
                        <a href="" class="small-box">
                            <span class="top">JavaScript</span>
                            <span class="front"></span>
                        </a>
                        <a href="" class="small-box">
                            <span class="top">jQuery</span>
                            <span class="front"></span>
                        </a>
                        <a href="" class="big-box">
                            <div class="big-hide">
                                <h3>站长处女作</h3>
                                <p>HTML和CSS基础</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="home-menu-rotate">
                    <ul class="clearfix">
                        <li>
                            <a href="">
                                <img src="./img/run_code.png" alt="">
                                <p>在线测试</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="./img/color_picker.png" alt="">
                                <p>在线调色板</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="./img/json.png" alt="">
                                <p>JSON格式化</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="./img/regex.png" alt="">
                                <p>正则测试</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="./img/border_radius.png" alt="">
                                <p>CSS3圆角</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="./img/md5.png" alt="">
                                <p>MD5加密</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="home-sider-r">
                <h2 class="common-title">最新动态</h2>
                <ul class="conmon-list latest-list">
                    <li>
                        <a href="">
                            <i class="icon">1</i>
                            <span data-hover="HTML5参考手册">绿叶第一本教材正式出版啦！</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon">2</i>
                            <span data-hover="CSS3参考手册">《JavaScript基础教程》出版啦</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon">3</i>
                            <span data-hover="HTML5参考手册">《HTML5 Canvas开发》来袭</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon">4</i>
                            <span data-hover="CSS3参考手册">《HTML和CSS进阶》出版啦</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon">5</i>
                            <span data-hover="HTML5参考手册">我的处女作出版了！</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon">6</i>
                            <span data-hover="CSS3参考手册">绿叶学习网常见问题解答</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon">7</i>
                            <span data-hover="HTML5参考手册">网站技术，该如何学习？</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon">8</i>
                            <span data-hover="CSS3参考手册">绿叶学习网开张啦</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 前端入门 -->
        <div class="course-box">
            <h2 class="common-title">前端入门</h2>
            <div class="course-list">
                <a href="">
                    <figure>
                        <img src="images/course_html.png" alt="">
                        <figcaption>
                            <h3 class="clearfix">
                                <i>初</i>
                                HTML入门教程
                            </h3>
                            <p>50000+互联网读者点击学习，超高人气在线教程</p>
                        </figcaption>
                    </figure>
                </a>
                <a href="">
                    <figure>
                        <img src="images/course_css.png" alt="">
                        <figcaption>
                            <h3 class="clearfix">
                                <i>初</i>
                                CSS入门教程
                            </h3>
                            <p>互联网公认最好的CSS入门教程，没有之一。</p>
                        </figcaption>
                    </figure>
                </a>
                <a href="">
                    <figure>
                        <img src="images/course_javascript.png" alt="">
                        <figcaption>
                            <h3 class="clearfix">
                                <i>初</i>
                                JavaScript入门教程
                            </h3>
                            <p>20000+互联网读者的选择，专门针对没有编程基础的小伙伴</p>
                        </figcaption>
                    </figure>
                </a>
                <a href="">
                    <figure>
                        <img src="images/course_jquery.png" alt="">
                        <figcaption>
                            <h3 class="clearfix">
                                <i>初</i>
                                jQuery入门教程
                            </h3>
                            <p>一个比市面上绝大多数jQuery书籍还要好的精品教程</p>
                        </figcaption>
                    </figure>
                </a>
                <a href="">
                    <figure>
                        <img src="images/course_sass.png" alt="">
                        <figcaption>
                            <h3 class="clearfix">
                                <i>初</i>
                                Sass教程
                            </h3>
                            <p>国内少有的Sass教程，极大提高开发效率的利器</p>
                        </figcaption>
                    </figure>
                </a>
            </div>
        </div>
        <!-- 前端进阶 -->
        <div class="course-box">
            <h2 class="common-title">前端进阶</h2>
            <div class="course-list">
                <a href="">
                    <figure>
                        <img src="images/course_advanced.png" alt="">
                        <figcaption>
                            <h3 class="clearfix">
                                <i>中</i>
                                HTML和CSS进阶教程
                            </h3>
                            <p>国内第一个HTML和CSS进阶教程，前端工程师必备！</p>
                        </figcaption>
                    </figure>
                </a>
                <a href="">
                    <figure>
                        <img src="images/course_css3.png" alt="">
                        <figcaption>
                            <h3 class="clearfix">
                                <i>中</i>
                                CSS3教程
                            </h3>
                            <p>简单来说，这是一个让你能做出绿叶首页所有酷炫特效的教程！</p>
                        </figcaption>
                    </figure>
                </a>
                <a href="">
                    <figure>
                        <img src="images/course_web.png" alt="">
                        <figcaption>
                            <h3 class="clearfix">
                                <i>中</i>
                                HTML5 Canvas
                            </h3>
                            <p>国内第一本HTML5 Canvas，揭秘大量前端黑科技！</p>
                        </figcaption>
                    </figure>
                </a>
                <a href="">
                    <figure>
                        <img src="images/course_json.png" alt="">
                        <figcaption>
                            <h3 class="clearfix">
                                <i>中</i>
                                JSON教程
                            </h3>
                            <p>互联网第一个JSON教程，全面透彻介绍JSON使用技巧</p>
                        </figcaption>
                    </figure>
                </a>
                <a href="">
                    <figure>
                        <img src="images/course_regex.png" alt="">
                        <figcaption>
                            <h3 class="clearfix">
                                <i>中</i>
                                正则表达式
                            </h3>
                            <p>前后端开发利器，学习正则表达式必看的教程</p>
                        </figcaption>
                    </figure>
                </a>
            </div>
        </div>
        <!-- 网站简介和评价 -->
        <div class="website-introduction">
            <div class="comment">
                <h2 class="common-title">100000+读者&nbsp;&nbsp;&nbsp;&nbsp;5000+评价</h2>
                <div class="comment-list">
                    <article class="clearfix">
                        <div class="comment-user">
                            <img class="avatar" src="./img/avatar1.jpg" alt="">
                            <p class="name">邵婵Aeb</p>
                        </div>
                        <div class="comment-text">
                            <i class="iconfont icon-icon-copy-copy"></i>
                            我很久没看到过这么好的教程了，网上有些教程都在讲芝麻，没有基础根本学不会。但是绿叶感觉很不一样，讲得非常通俗易懂。之前我跑了几趟图书馆也没有找到这么好的教程。
                            <i class="iconfont icon-icon-quote"></i>
                        </div>
                        <div class="beautify"></div>
                    </article>

                    <article class="clearfix">
                        <div class="comment-user">
                            <img class="avatar" src="./img/avatar2.jpg" alt="">
                            <p class="name">格局</p>
                        </div>
                        <div class="comment-text">
                            <i class="iconfont icon-icon-copy-copy"></i>
                            讲得非常详细，其他什么乱七八糟的网站讲得太简单了，前面还好理解后面的就讲的懵了。这个作者不错支持一下！希望后面的知识也能讲的这么神奇！
                            <i class="iconfont icon-icon-quote"></i>
                        </div>
                        <div class="beautify"></div>
                    </article>
                    <article class="clearfix">
                        <div class="comment-user">
                            <img class="avatar" src="./img/avatar3.jpg" alt="">
                            <p class="name">小众</p>
                        </div>
                        <div class="comment-text">
                            <i class="iconfont icon-icon-copy-copy"></i>
                            看到现在的学习网站，这是我看过最高效，最精炼的HTML的学习网站了。下一批肯定会造就很多前端人士。
                            <i class="iconfont icon-icon-quote"></i>
                        </div>
                        <div class="beautify"></div>
                    </article>
                    <article class="clearfix">
                        <div class="comment-user">
                            <img class="avatar" src="./img/avatar4.jpg" alt="">
                            <p class="name">重楼箫客</p>
                        </div>
                        <div class="comment-text">
                            <i class="iconfont icon-icon-copy-copy"></i>
                            站长深谙学习之道，就是把陌生概念和生活经验做对接，避免“知识的诅咒”，说白了就是要有很多恰切的比喻作为桥梁，thanks a lot！——认知心理学&编程爱好者
                            <i class="iconfont icon-icon-quote"></i>
                        </div>
                        <div class="beautify"></div>
                    </article>
                </div>
            </div>
            <aside>
                <div class="pic-box">
                    <img src="images/lvye_meitu.jpg" alt="">
                </div>
                <a href="">
                    捐助绿叶
                    <span>您小小捐助，可以让互联网最好的免费精品网站一直生存下去。</span>
                </a>
                <h2>网站简介</h2>
                <p>
                    绿叶学习网成立于2015年4月1日，是一个最富有活力的Web技术学习网站。在这里，我们只提供互联网最好的Web技术教程和最佳的学习体验。每一个教程、每一篇文章、甚至每一个知识点，都体现绿叶精品的态度。没有最好，但是我们可以做到更好！
                </p>
            </aside>
        </div>
    </div>
    <!-- 尾部 -->
    <footer>
        <div class="w1100">
            <div class="friendlink">
                <a class="" href="">
                    <span data-hover="红叶学习网">红叶学习网</span>
                </a>
                <a class="" href="">
                    <span data-hover="红叶学习网">紫叶温习网</span>
                </a>
                <a class="" href="">
                    <span data-hover="红叶学习网">蓝叶学习网</span>
                </a>
                <a class="" href="">
                    <span data-hover="红叶学习网">黄叶学习网</span>
                </a>
                <a class="" href="">
                    <span data-hover="红叶学习网">橙叶复习网</span>
                </a>
                <a class="" href="">
                    <span data-hover="红叶学习网">灰叶复习网</span>
                </a>
            </div>
            <div class="footer-info">
                <div class="footer-link">
                    <a href="">关于我们</a>
                    <span>|</span>
                    <a href="">联系我们</a>
                    <span>|</span>
                    <a href="">版权声明</a>
                    <span>|</span>
                    <a href="">免责声明</a>
                    <span>|</span>
                    <a href="">广告服务</a>
                    <span>|</span>
                    <a href="">意见反馈</a>
                </div>
                <p class="footer-advice">版权声明:本站所有教程均为原创，版权所有，禁止转载和抄袭，否则必追究法律责任。</p>
                <p class="footer-filing">
                    <a href="">粤ICP备15029970号-1</a>
                    <a href="">站长统计</a>
                </p>
                <p class="footer-copyright">Copyright ©2015-2019 绿叶学习网(www.lvyestudy.com), All Rights Reserved</p>
            </div>
        </div>
    </footer>
    <script type="text/javascript" src="js/banner.js"></script>
    <script type="text/javascript">
        var banner = new FragmentBanner({
            imgs: ['images/banner1.png', 'images/banner2.png', 'images/banner3.png', 'images/banner4.png',
                'images/banner5.png'
            ], //图片集合 必选
            size: {
                width: 1100,
                height: 300
            }, //容器的大小 可选
            //行数与列数 可选
            grid: {
                line: 12,
                list: 14
            },
            index: 0, //图片集合的索引位置 可选
            type: 2, //切换类型 1 ， 2 可选
            boxTime: 1000, //小方块来回运动的时长 可选
            fnTime: 10000 //banner切换的时长 可选
        });
    </script>
</body>

</html>